<template>
  <div>
    <div>
      <!-- 头部导航 -->
      <van-nav-bar fixed>
        <template v-slot:left>
          <img class="logo" src="@/assets/131.webp" alt="" />
        </template>
        <template #right>
          <van-icon name="search" size="1rem" color="#fff" @click="searchFn" />
        </template>
      </van-nav-bar>
    </div>
    <!-- Tab导航栏 -->
    <!-- v-model 关联的是激活项的下标(双向绑定) -->
    <div class="main">
      <!-- 每一个van-tab代表一个标签导航，中间夹着内容，对应下属列表的内容 -->
      <van-tabs
        v-model="channelId"
        sticky
        offset-top="1.2rem"
        animated
        @change="channelChangeFn"
      >
        <van-tab
          :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
          :name="obj.id"
        >
          <!-- :name的值就是 v-modle绑定的值 -->
          <ArticleList :channelId="channelId"></ArticleList>
        </van-tab>
      </van-tabs>
      <!-- 编辑频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="plusClickFn"
      />
      <!-- 频道的弹出层 -->
      <van-popup class="channelPopup" v-model="show">
        <!-- unCheckChannelList为计算属性 -->
        <ChannelEdit
          :userList="userChannelList"
          :allChannelList="unCheckChannelList"
          @addChannelEv="addChannelFn"
          @deleteEv="deleteFn"
          @closeEv="closeFn"
          ref="editRef"
          v-model="channelId"
        >
        </ChannelEdit>
      </van-popup>
    </div>
  </div>
</template>

<script>
// 项目优化点，问题:第一次点击时，每一个栏目里面的内容都是新创建的并且发送请求，得到数据
//第二次点击的时候，进行切换，会发送请求得到新的数据，并没有进行刷新，原来的内容得不到保留
// 解决方法: 在list 页面就进行发生请求，创建内容，在index 页面只需要获得传过来的channelId进行切换就好
//在进行切换页面时，页面已经创建完成，并且数据不会发生变化，只有在刷新的时候才会重新发生请求得到数据

import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelAPI,
  deleteChannelAPI,
} from "@/api";

import ArticleList from "./components/ArticleList.vue";
import ChannelEdit from "./ChannelEdit.vue";

export default {
  //目标: 获取不同的文章列表，需要不同的频道id
  // 想法：让 van-tabs的 v-model关联频道id

  data() {
    return {
      channelId: 0, //激活导航栏
      userChannelList: [], //用户选择频道列表
      // articleList:[]//文章列表
      show: false, //控制频道弹出层的打开和折叠
      allChannelList: [], //所有频道列表
      channelsScrollT: {}, //不同频道滚动的位置
    };
  },
  async created() {
    const res = await getUserChannelsAPI();
    //  console.log(res);
    //  给列表赋值
    this.userChannelList = res.data.data.channels;

    const res2 = await getAllChannelsAPI(); //获取全部列表信息
    this.allChannelList = res2.data.data.channels;
    //     //进行回调函数，使页面刚进来的时候有显示
    //     this.channelChangeFn();
  },
  //因为 使用created钩子的时候，只会在创建的时候使用，后续不会进行刷新
  methods: {
    //频道切换
    channelChangeFn() {
      //   //获取文章列表
      //     const res2 = await getAllArticleListAPI({
      //       channel_id: this.channelId ,
      //       timestamp: (new Date()).getTime()
      // })
      //     console.log(res2);
      //     this.articleList = res2.data.data.results

      // 在切换回频道的时候，频道高度会变成0
      // 使用 nextTick等到Dom更新完成之后再去改变高度
      this.$nextTick(()=>{
        document.documentElement.scrollTop = this.channelsScrollT[this.channelId]
      })
    },
    plusClickFn() {
      this.show = true;
    },
    // 添加频道
    async addChannelFn(obj) {
      this.userChannelList.push(obj);
      const res = await updateChannelAPI({
        channels: this.userChannelList,
      });

      // console.log("@@@" + obj);
      // console.log(11111);
    },

    //删除频道
    async deleteFn(channelObj) {
      let index = this.userChannelList.findIndex(
        (obj) => obj.id === channelObj.id
      );
      this.userChannelList.splice(index, 1);

      const res = await deleteChannelAPI({
        channelId: channelObj.id,
      });
      console.log(res);
    },
    closeFn() {
      this.show = false;
      //在组件标签上面写 ref ，是获取组件标签，可以获取里面的数据信息
      this.$refs.editRef.showEv = false;
      // console.log(this.$refs.editRef);
    },
    //首页的搜索按钮点击---通过路由跳转到搜索页面
    searchFn() {
      this.$router.push("/search");
    },
    scrollFn() {
      this.$route.meta.ScrollT = document.documentElement.scrollTop;
      this.channelsScrollT[this.channelId] = document.documentElement.scrollTop
      console.log(this.channelsScrollT);
    },
  },
  //在组件激活时，添加滚动事件，然后给路由上面的 ScrollT 赋值，实时赋值
  activated() {
    window.addEventListener("scroll", this.scrollFn);
    // console.log(this.$route.meta.ScrollT);
    document.documentElement.scrollTop = this.$route.meta.ScrollT;
  },
  deactivated() {
    window.removeEventListener("scroll", this.scrollFn);
  },

  computed: {
    unCheckChannelList() {
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.userChannelList.findIndex((smallObj) => {
          return smallObj.id === bigObj.id;
        });
        if (index > -1) {
          return false;
        } else {
          return true;
        }
      });
      console.log(newArr);
      return newArr;
    },
  },
  components: {
    ArticleList,
    ChannelEdit,
  },
};
</script>

<style lang="less" scoped>
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 44px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channelPopup {
  width: 100vw;
  height: 100vh;
}
.van-sticky {
  top: 2.3625em;
}
</style>